<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue对象的生命周期</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
            <input type="text" v-model="message"><br>
            <span>{{message}} </span><br/>
            <span v-bind:title="message">
                鼠标悬停看消息
            </span>
    </div>
    <script>
        const app = new Vue({
            el:'#app',
            data: {
                "message": "hello"
            },
            // 生命周期中的钩子函数
            beforeCreate(){
                console.log("Vue实例初始化后,事件配置之前  --- beforeCreate ---")
                console.log("当前实例对象",this.message)
                console.log("挂载目标：",this.$el)
                console.log(" --- beforeCreate ---")
            },
            // created这个阶段，message就已经有值了
            created(){
                console.log(" ----- 创建后 ----- created ---")
                console.log("当前实例对象",this.message)
                console.log("挂载目标：",this.$el)
                console.log(" ----- 创建后 ----- created ---")
            },
            // beforeMount，el就有对象了
            beforeMount(){
                console.log("---- 挂载前 ----- beforeMount --- ")
                console.log("挂载目标",this.$el)
                console.log("---- 挂载前 ----- beforeMount --- ")
            },
            mounted(){
                console.log("---- 挂载后----- mounted --- ")
                console.log("挂载目标",this.$el)
                console.log("---- 挂载后 ----- mounted --- ")
            },
            beforeUpdate(){
                console.log("---- 更新之前 ---- beforeUpdate ---")
                console.log("数据：",this.message)
                this.message = "beforeUpdate"
                console.log("---- 更新之前 ---- beforeUpdate ---")
            },
            updated(){
                console.log("---- 更新之前 ---- updated ---")
                console.log("数据：",this.message)
                console.log("---- 更新之前 ---- updated ---")
            },
            beforeDestory(){
                console.log('---- beforeDestory.......')
                console.log("--------销毁之前。。。。",this.message)
                console.log('---- beforeDestory.......')
            },
            destroyed(){
                console.log('---- destoryed.......')
                console.log("--------销毁之后。。。。",this.message)
                console.log('---- destoryed.......')
            }
        }
        )
    </script>
        
</body>
</html>